<template>
	<view class="menu-box" :style="{ background:!disable&&linearGradient[type]?linearGradient[type]:'linear-gradient(-180deg, #FFA94A, #FF7229)',borderRadius: radius,height:height,width:width}">
		<view :class="{ rotate: isAnimation }">
			<i class="iconfont icon-color" :class="type" :style="{ color, fontSize: size }" ></i>
			<!-- <text :class="['qfc-icon', `qfc-icon-${type}`]" :style="{ color, fontSize: size }" /> -->
		</view>
	</view>
</template>

<script>
	export default {
		name:"menu-icon",
		props: {
			type: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: '#fff'
			},
			size: {
				type: [Number, String],
				default: '46rpx'
			},
			// disable没啥用，放着图一乐
			disable: {
				type: Boolean,
				default: false
			},
			isAnimation: {
				type: Boolean,
				default: false
			},
			radius: {
				type: String,
				default: '50%'
			},
			height: {
				type: String,
				default: '90rpx'
			},
			width: {
				type: String,
				default: '90rpx'
			},
			
		},
		data() {
			return {
				 linearGradient: {
					'icon-kongdiao': 'linear-gradient(-180deg, #FFA94A, #FF7229)',
					'icon-qiyefenzhi': 'linear-gradient(-180deg, #6aecff, #00C4AA)',
					'icon-wuyebaoxiu': 'linear-gradient(-180deg, #51D4FF, #369DFF)',
					'icon-saoma': 'linear-gradient(-180deg, #FFA06B, #FF7082)',
					'icon-yijianfankui': 'linear-gradient(-180deg, #4EF797, #00C4AA)',
					'icon-fangzu': 'linear-gradient(-180deg, #7FB7FF, #4E68FF)',
					'icon-xinwen_o': 'linear-gradient(-180deg, #4EF797, #00C4AA)',
					'icon-dongtai': 'linear-gradient(-180deg, #FFD224, #FF7229)',
					'icon-rongyu': 'linear-gradient(-180deg, #7FB7FF, #4E68FF)',
					'visit-code': 'linear-gradient(-180deg, #51D4FF, #369DFF)',
					'icon-zhengzhi': 'linear-gradient(-180deg, #fc6076, #FF7229)',
					'icon-nav-04': 'linear-gradient(-180deg, #fc6076, #FF7229)',
					'icon-shishichaobiao': 'linear-gradient(-180deg, #6aecff, #00C4AA)',
					'icon-huodong': 'linear-gradient(-180deg,#d70008, #d70008 80%,#c00007 80%, #c00007)',
					'icon-jinduchaxun': 'linear-gradient(-180deg,#d70008, #d70008 80%,#c00007 80%, #c00007)',
					'icon-dangjian_dangyuanluntan': 'linear-gradient(-180deg,#d70008, #d70008 80%,#c00007 80%, #c00007)',
					'icon-renyuanzengjia': 'linear-gradient(-180deg,#d70008, #d70008 80%,#c00007 80%, #c00007)',
					'icon-tuichu': 'linear-gradient(-180deg,#d70008, #d70008 80%,#c00007 80%, #c00007)',
				}
			};
		},
		methods: {
			_onClick() {
				this.$emit('click');
			}
		}
	}
</script>

<style lang="scss" scoped>
.menu-box {
    height: 90rpx;
    border-radius: 40rpx;
    width: 90rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: linear-gradient(-180deg, #fc6076, #FF7229);
}	

.rotate {
    animation: rotate 1.5s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotateZ(0deg);
    }
    8% {
        transform: rotateZ(30deg);
    }
    16% {
        transform: rotateZ(0deg);
    }
    24% {
        transform: rotateZ(-30deg);
    }
    32% {
        transform: rotateZ(0deg);
    }
    40% {
        transform: rotateZ(30deg);
    }
    48% {
        transform: rotateZ(0deg);
    }
    56% {
        transform: rotateZ(-30deg);
    }
    64% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}
</style>